
import { useEffect, useState } from 'react';
import router from 'next/router';
import HeadTitle from '../../components/headtitle';
import MainContainer from '../../components/maincontainer';
import Container from '../../components/container';
import { IData, Query as Q1, Result as R1 } from '../api/activity/avtivity.api';
import smartfetch from '../../atoms/smartfetch';
import api from '../../atoms/api';
import Infocontainer from './infocontainer';
import Btn from '../../components/btn';
import pages from '../../atoms/pages';

export default function Content({ aid }: { aid: string }) {
	// 查询
	const [data, setData] = useState<IData>({} as IData);
	async function SearchData() {
		const d = await smartfetch<R1, Q1>(api['/api/activity/avtivity'], 'get', { aid });
		if (d) {
			setData(d.data);
		}
	}
	//执行
	useEffect(() => {
		void SearchData();
	}, [aid]);
	return <>
		<MainContainer>
			<HeadTitle title='查看活动二维码' />
			<Container>
				<div className='top'>
					<img className='img' src={data.qrcode} />
					<Infocontainer title='温馨提示' value='你可以把此二维码打印到活动海报上，微信扫一扫既可以查看该活动！' />
				</div>
				<div className='bottom'>
					<a download href={data.qrcode}><Btn label='下载二维码' /></a>
					<Btn label='返回首页' onClick={() => {
						window.location.href = pages['/'];
					}} />
				</div>
			</Container>
		</MainContainer>
		<style jsx>{`
.top{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-grow: 2;
padding-right: 2rem;
padding-left: 2rem;
}
.img{
width: 10.25rem;
height: 10.25rem;
}
.bottom{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-grow: 1;
}
		`}</style>
	</>;
}

function DateConvert(date: number) {
	const d = new Date(Number(date));
	return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDay()}`;
}
